<!--导航栏组件-->
<template>
  <div class="navigation">
    <div :class="className">
      <ul>
        <li
          v-for="item in parentColumns"
          :key="item.column_id"

        >
          <router-link
            :to="{ path: item.path }"
            active-class="active"
          >
            {{ item.column_name }}
          </router-link>
        </li>

      </ul>
    </div>

  </div>
</template>

<script>

import {mapState} from "vuex";


export default {
  props: {
    //父组件传递过来的
    className: {
      type: String,
      default: 'nav'
    }

  },
  data() {
    return {};
  },

  computed: {
    ...mapState(['parentColumns'])
  },

  created() {


  },

  methods: {},
  mounted() {

  },
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}

.nav {
  width: 100%;
  background-color: rgba(255, 255, 123, 0.13);
}

.nav ul {
  display: flex;
  justify-content: center;
}

.nav li {
  width: 115px;
  height: 45px;
  line-height: 45px;
  list-style: none;
  text-align: center;
  font-size: 15px;
}

.nav li a {
  display: block;
  text-decoration: none;
  color: black;
}

.nav li :hover {
  background-color: #2b547e;
  color: #fff;
}

.nav .active {
  background-color: #2b547e;
  color: #fff;
}

.mynav {
  width: 100%;
  background-color: #4D4D4D;
}

.mynav ul {
  display: flex;
  justify-content: center;
}

.mynav li {
  width: 115px;
  height: 45px;
  line-height: 45px;
  list-style: none;
  text-align: center;
  font-size: 15px;
}

.mynav li a {
  display: block;
  text-decoration: none;
  color: white;
}

.mynav li :hover {
  background-color: rgba(37, 33, 33, 0.99);
  color: #fff;
}

.mynav .active {
  background-color: rgba(37, 33, 33, 0.99);
  color: #fff;
}
</style>
